import { Component, createRef } from 'react';
import ReactDOM from 'react-dom/client';

/* 
  获取DOM元素或组件：ref
    1. 通过 createRef 创建一个 ref 对象
    2. 在 JSX 中通过 ref 属性绑定 ref 对象
  
  React 工作原理：
    在组件挂载完毕后，自动把 DOM 节点的引用地址赋值给 ref 对象的 .current 存储
*/

class App extends Component {
  // 创建一个 ref
  inputRef = createRef();

  handlerClick = () => {
    // 通过 .current 获取元素
    console.log(this.inputRef.current);
  };

  render() {
    return (
      <>
        <input type='text' ref={this.inputRef} />
        <button onClick={this.handlerClick}>点击查看inputRef</button>
      </>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
